<template>
  <div class="resources">
    <Header title="实时客流"></Header>
    <Nav></Nav>
    <!-- 地图右侧列表 -->
    <div class="map-right-box">
      <router-link to="road" :class="{active:isActive==0}">
        <img src="@/assets/images/map-right-road.png" alt />
        <img class="active" src="@/assets/images/map-right-roadA.png" alt />
        路况
      </router-link>
      <router-link to :class="{active:isActive==1}">
        <img src="@/assets/images/map-right-flow.png" alt />
        <img class="active" src="@/assets/images/map-right-flowA.png" alt />
        客流
      </router-link>
      <router-link to="weather" :class="{active:isActive==2}">
        <img src="@/assets/images/map-right-weather.png" alt />
        <img class="active" src="@/assets/images/map-right-weatherA.png" alt />
        气象
      </router-link>
      <router-link to="report" :class="{active:isActive==3}">
        <img src="@/assets/images/map-right-report.png" alt />
        <img class="active" src="@/assets/images/map-right-reportA.png" alt />
        上报
      </router-link>
    </div>
    <div class="flow-box">
      <P>
        <i>1</i>
        <span>舒畅</span>
      </P>
      <P>
        <i>2</i>
        <span>较舒畅</span>
      </P>
      <P>
        <i>3</i>
        <span>一般</span>
      </P>
      <P>
        <i>4</i>
        <span>较拥堵</span>
      </P>
      <P>
        <i>5</i>
        <span>拥堵</span>
      </P>
    </div>
    <!-- 弹窗 -->
    <van-popup v-model="isShow">
      <div
        class="flow-prop"
        :class="{active1:code==1,active2:code==2,active3:code==3,active4:code==4,active5:code==5}"
      >
        <h3>{{markerName}}</h3>
        <p>数据更新时间：2019-10-20 10:25每15分钟自动更新</p>
        <div class="flow-level">
          <p>{{code}}</p>
          <span v-show="code==1">舒畅</span>
          <span v-show="code==2">较舒畅</span>
          <span v-show="code==3">一般</span>
          <span v-show="code==4">拥堵</span>
          <span v-show="code==5">较拥堵</span>
        </div>
        <div v-show="code==1" class="flow-level-info">
          <span>“</span>舒适，适合参观游览
          <span>”</span>
        </div>
        <div v-show="code==2" class="flow-level-info">
          <span>“</span>较为舒适，适合参观游览
          <span>”</span>
        </div>
        <div v-show="code==3" class="flow-level-info">
          <span>“</span>一般，适合参观游览
          <span>”</span>
        </div>
        <div v-show="code==4" class="flow-level-info">
          <span>“</span>拥挤，不适合参观游览
          <span>”</span>
        </div>
        <div v-show="code==5" class="flow-level-info">
          <span>“</span>较为拥堵，不适合参观游览
          <span>”</span>
        </div>
        <p>景区人流量：0.8万人</p>
        <p v-show="code==1">交通：通畅</p>
        <p v-show="code==2">交通：较通畅</p>
        <p v-show="code==3">交通：一般</p>
        <p v-show="code==4">交通：拥堵</p>
        <p v-show="code==5">交通：较拥堵</p>
      </div>
    </van-popup>
    <baidu-map
      class="map"
      :center="center"
      :zoom="zoom"
      :scroll-wheel-zoom="true"
      :double-click-zoom="false"
    >
      <bm-traffic :predictDate="{weekday: 7, hour: 12}">
      </bm-traffic>
      <bm-marker
        v-for="(item,index) in positionList"
        :key="index"
        :position="item"
        :dragging="false"
        :icon="{url:iconUrlList[index], size: {width: 26, height:32}}"
        @click="showModal(index+1,markerNameList[index])"
      ></bm-marker>
    </baidu-map>
  </div>
</template>

<script>
// @ is an alias to /src
import Header from "@/components/Header/Header.vue";
import Nav from "@/components/Nav/Nav.vue";
import marker1 from "@/assets/images/marker1.png";
import marker2 from "@/assets/images/marker2.png";
import marker3 from "@/assets/images/marker3.png";
import marker4 from "@/assets/images/marker4.png";
import marker5 from "@/assets/images/marker5.png";
export default {
  name: "road",
  components: {
    Header,
    Nav
  },
  data: function () {
    return {
      center: {lng: 113.027975, lat: 34.51921},
      zoom: 10,
      // marker
      positionList: [
        {lng: 113.020789, lat:34.540385},
        {lng: 112.756328, lat: 34.521352},
        {lng: 112.910405, lat: 34.269709},
        {lng: 113.211661, lat: 34.675391},
        {lng: 113.105876, lat: 34.258252}
      ],
      iconUrlList: [marker1, marker2, marker3, marker4, marker5],
      markerNameList: ["嵩山风景区", "双龙山", "怪坡旅游区", "杨树沟", "大鸿寨"],
      markerName: "",
      code: -1,
      // 地图右侧列表 是否选中 0路况 1客流  2气象  3上报
      isActive: 1,
      // 弹层是否显示
      isShow: false
    };
  },
  methods: {
    showModal(index, name) {
      console.log(name);
      this.isShow = true;
      this.code = index;
      this.markerName = name;
    },
    showList() {
      if (this.isShowList) {
        this.isShowList = false;
        this.iconName = "arrow";
      } else {
        this.isShowList = true;
        this.iconName = "arrow-down";
      }
    }
  }
};
</script>
<style lang="less" scope>
.resources {
  position: relative;
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
}

.map {
  width: 100%;
  height: 100vh;
}

// 修改vant 弹窗样式
.van-popup--center {
  width: 500/7.5vw;
  height: 800/7.5vw;
  padding: 30/7.5vw;
  border-radius: 10/7.5vw;
  box-sizing: border-box;
}
.flow-box {
  position: absolute;
  top: 118/7.5vw;
  left: 10/7.5vw;
  width: 200/7.5vw;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 8/7.5vw;
  padding: 20/7.5vw;
  box-sizing: border-box;
  z-index: 100;
  p {
    display: flex;
    align-items: center;
    font-size: 28/7.5vw;
    height: 72/7.5vw;
    i {
      display: block;
      width: 40/7.5vw;
      height: 40/7.5vw;
      margin-right: 20/7.5vw;
      border-radius: 50%;
      text-align: center;
      line-height: 40/7.5vw;
      font-size: 20/7.5vw;
      color: #fff;
    }
    &:nth-of-type(1) {
      color: #13d21c;
      i {
        background-color: #13d21c;
      }
    }
    &:nth-of-type(2) {
      color: #1fd79d;
      i {
        background-color: #1fd79d;
      }
    }
    &:nth-of-type(3) {
      color: #3285ff;
      i {
        background-color: #3285ff;
      }
    }
    &:nth-of-type(4) {
      color: #ffdb32;
      i {
        background-color: #ffdb32;
      }
    }
    &:nth-of-type(5) {
      color: #ff8932;
      i {
        background-color: #ff8932;
      }
    }
  }
}
.flow-prop {
  > h3 {
    font-size: 42/7.5vw;
    font-weight: bold;
    text-align: center;
    line-height: 72/7.5vw;
  }
  p {
    padding: 0 60/7.5vw;
    text-align: center;
    font-size: 24/7.5vw;
    line-height: 45/7.5vw;
  }
  &.active1 {
    .flow-level {
      background-color: #13d21c;
    }
    .flow-level-info {
      color: #13d21c;
    }
  }
  &.active2 {
    .flow-level {
      background-color: #1fd79d;
    }
    .flow-level-info {
      color: #1fd79d;
    }
  }
  &.active3 {
    .flow-level {
      background-color: #3285ff;
    }
    .flow-level-info {
      color: #3285ff;
    }
  }
  &.active4 {
    .flow-level {
      background-color: #ffdb32;
    }
    .flow-level-info {
      color: #ffdb32;
    }
  }
  &.active5 {
    .flow-level {
      background-color: #ff8932;
    }
    .flow-level-info {
      color: #ff8932;
    }
  }
  .flow-level {
    width: 240/7.5vw;
    height: 240/7.5vw;
    margin: 60/7.5vw auto;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    > p {
      font-size: 140/7.5vw;
      padding-top: 30/7.5vw;
      line-height: 140/7.5vw;
    }
    > span {
      font-size: 28/7.5vw;
    }
  }
  .flow-level-info {
    font-size: 32/7.5vw;
    margin-bottom: 50/7.5vw;
    text-align: center;
    > span {
      display: inline-block;
      font-size: 60/7.5vw;
      height: 20/7.5vw;
      font-weight: bold;
      &:nth-of-type(1) {
        line-height: 20/7.5vw;
        vertical-align: top;
      }
      &:nth-of-type(2) {
        vertical-align: bottom;
        line-height: 80/7.5vw;
      }
    }
  }
  .active1 {
    .flow-level {
      background-color: #1fd79d;
    }
    .flow-level-info {
      color: #1fd79d;
    }
  }
}
.map-right-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  right: 10/7.5vw;
  top: 118/7.5vw;
  width: 80/7.5vw;
  height: 400/7.5vw;
  padding: 10/7.5vw;
  border-radius: 6/7.5vw;
  background-color: #fff;
  box-sizing: border-box;
  color: #666;
  font-size: 20/7.5vw;
  z-index: 1;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3), -2px -2px 10px rgba(0, 0, 0, 0.3);
  > a {
    flex: 1;
    border-top: 1px solid #e6e6e6;
    &:nth-of-type(1) {
      border-top: 0;
      img {
        margin-bottom: 15/7.5vw;
      }
    }
    img {
      display: block;
      width: 40/7.5vw;
      margin: 0 auto;
      margin-top: 15/7.5vw;
      &.active {
        display: none;
      }
    }
    &.active {
      img {
        display: none;
        &.active {
          display: block;
        }
      }
    }
  }
}
</style>